<template>
  <div>
    <el-button @click="handleClick2">点击</el-button>
  </div>
</template>

<script lang="ts" setup>
// import { ref, computed } from "vue";
/**
 * 测试无法触达的内存空间也无法回收。
 */

function createIncrease() {
  const doms = new Array(100000).fill(0).map((item, index) => {
    const dom = document.createElement("div");
    dom.innerHTML = index.toString();
    return dom;
  });

  function increase() {}
  function add() {
    doms;
  }
  return increase;
}
// 方法1: 代码上看会生成10万个游离节点，
// 从浏览器控制台上内存分析看出，好像并没有新增10万个游离节点，好像被自动回收了。
// 也就是说 方法1 会自动回收，方法2 不会自动回收。
function handleClick() {
  console.log("点击按钮==");
  const increase = createIncrease();
  increase();
}

// 方法2: 提交定义 increase; 点击后会新增10万个游离节点 不会被自动回收；
// 这个案列说明了 无法触达的内存空间也会无法回收。
let increase;
function handleClick2() {
  console.log("点击按钮2==");
  increase = createIncrease();
}
</script>

<style scoped lang="less"></style>
